<template>
    <div class="anime">
        <!-- search -->
        <div class="search">
            <input type="text" @focus="inputFocus" @blur="inputBlur" v-model="searchInput" class="searchInput" />
            <i class="search-icon" v-show="searchShow"></i>
            <span class="searchPlaceHolder" v-show="searchShow">搜索</span>
        </div>
        <mTitle :title="title"></mTitle>
        <scroll class="anime-wrapper" :data="animeList" :pullup="pullup" @scrollToEnd="searchMore" v-show="!searchInput">
            <div v-show="animeList.length">
                <ul class="anime-item">
                    <li class="anime-list" v-for="(item, index) in animeList" :key="index">
                        <span class="anime-list-date">{{item.pubdate}}</span>
                        <h4 class="anime-list-title">{{item.title}}</h4>
                        <!-- type=2代表视频 -->
                        <div class="video-wrapper" v-if="Number(item.type) === 2">
                            <!-- <img :src="item.img" alt="" />  -->
                            <video :poster="item.coverimg" preload="auto" controls="controls" class="video-info" @play="stopMusic" ref="video">
                                <source :src="item.resourceurl" type="video/mp4" />
                            </video>
                        </div>
                        <!-- type=3代表音频 -->
                        <div class="music-wrapper" v-if="Number(item.type) === 3" ref="musicWrapper">
                            <audio ref="audio" :src="item.resourceurl" @canplay="ready" @timeupdate="updateTime" @ended="endMusic"></audio>
                            <div class="left" @click="playMusic">
                                <i class="music-icon"></i>
                            </div>
                            <div class="right">
                                <h6 class="music-title">{{item.title}}</h6>
                                <span class="music-from">来源：{{item.source}}</span>
                                <div class="progress-bar-wrapper">
                                    <div class="bar-inner">
                                        <div class="progress" ref="progress"></div>
                                    </div>
                                </div>
                                <div class="music-time-wrapp">
                                    <span class="star-time">00:00</span>
                                    <span class="end-time">00:00</span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <loading v-show="!hasMore"></loading>
                    <li class="bottom-text" v-show="endMore">已加载全部数据</li>
                </ul>
            </div>
            <!-- 请求数据loading -->
            <div class="loading-wrapper" v-show="!animeList.length">
                <loading></loading>
            </div>
        </scroll>
        <!-- 搜索 -->
        <scroll class="anime-wrapper" :data="list" v-show="list.length">
            <div v-show="animeList.length">
                <ul class="anime-item">
                    <li class="anime-list" v-for="(item, index) in list" :key="index">
                        <span class="anime-list-date">{{item.pubdate}}</span>
                        <h4 class="anime-list-title">{{item.title}}</h4>
                        <!-- type=2代表视频 -->
                        <div class="video-wrapper" v-if="Number(item.type) === 2">
                            <!-- <img :src="item.img" alt="" />  -->
                            <video :poster="item.coverimg" preload="auto" controls="controls" class="video-info" @play="stopMusic" ref="video">
                                <source :src="item.resourceurl" type="video/mp4" />
                            </video>
                        </div>
                        <!-- type=3代表音频 -->
                        <div class="music-wrapper" v-if="Number(item.type) === 3" ref="musicWrapper">
                            <audio ref="audio" :src="item.resourceurl" @canplay="ready" @timeupdate="updateTime" @ended="endMusic"></audio>
                            <div class="left" @click="playMusic">
                                <i class="music-icon"></i>
                            </div>
                            <div class="right">
                                <h6 class="music-title">{{item.title}}</h6>
                                <span class="music-from">来源：{{item.source}}</span>
                                <div class="progress-bar-wrapper">
                                    <div class="bar-inner">
                                        <div class="progress" ref="progress"></div>
                                    </div>
                                </div>
                                <div class="music-time-wrapp">
                                    <span class="star-time">00:00</span>
                                    <span class="end-time">00:00</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </scroll>
        <!-- 底部 -->
        <div class="anime-fixed">
            <router-link to="/anime" class="anime-fixed-item active" replace>
                <i class="icon icon-item1"></i>
                <span class="desc">动漫馆</span>
            </router-link>
            <router-link to="/gallery" class="anime-fixed-item" replace>
                <i class="icon icon-item2"></i>
                <span class="desc">数字展馆</span>
            </router-link>
            <router-link to="/resource" class="anime-fixed-item" replace>
                <i class="icon icon-item3"></i>
                <span class="desc">数字资源库</span>
            </router-link>
        </div>
        <div class="no-result" v-show="!list.length && searchInput">暂无搜索结果</div>   
    </div>
</template>

<script type="text/javascript">
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    import {removeClass} from 'common/js/common'

    export default {
        data() {
            return {
                searchInput: "",
                searchShow: true,
                title: "动漫馆",
                duration: 0,
                animeList: [],
                searchList: [],
                list: [],
                percents: 0,
                pullup: true,
                num: 1,
                size: 10,
                total: 0,
                hasMore: true,
                endMore: false
            }
        },
        methods: {
            // 获取焦点
            inputFocus () {
                this.searchShow = false
                if (this.searchList.length > 0) {
                    return
                } else {
                    axios.get('/api/index.php?g=Api&m=Guanwang&a=dongmanguan&page='+ this.num +'&size=' + this.total +'').then((res) => {
                        res = res.data
                        this.searchList = res.list
                    })
                }
            },
            // 失去焦点
            inputBlur () {
                if (this.searchInput === "") {
                    this.searchShow = true
                }
            },
            // 播放视频停止播放音乐
            stopMusic () {
                var audios = this.$refs.audio
                audios.forEach((value, index) => {
                    value.pause()
                    value.nextElementSibling.firstElementChild.setAttribute("class","music-icon")
                })
            },
            // 播放音乐停止播放视频
            stopVideo() {
                var videos = this.$refs.video
                videos.forEach((value, index) => {
                    value.pause()
                })
            },
            // 播放音乐
            playMusic (e) {
                this.stopVideo()
                var audios = this.$refs.audio
                // 播放选中的音乐
                if (e.target.parentNode.previousElementSibling.paused) {
                    // 暂停所有
                    audios.forEach((value, index) => {
                        value.pause()
                        value.nextElementSibling.firstElementChild.setAttribute("class","music-icon")
                    })
                    e.target.parentNode.previousElementSibling.play()
                    e.target.setAttribute("class","music-icon active")
                } else {
                    e.target.parentNode.previousElementSibling.pause()
                    e.target.setAttribute("class","music-icon")
                }
            },
            ready (e) {
                e.target.parentNode.children[2].children[3].children[1].innerHTML = this.format(e.target.duration)
            },
            updateTime (e) {
                e.target.parentNode.children[2].children[3].children[0].innerHTML = this.format(e.target.currentTime)
                e.target.parentNode.children[2].children[2].children[0].children[0].style.width = e.target.currentTime / e.target.duration *100+'%'
            },
            endMusic (e) {
                e.target.nextElementSibling.firstElementChild.setAttribute("class","music-icon")
            },
            // 获取数据
            getAnimeList () {
                axios.get('/api/index.php?g=Api&m=Guanwang&a=dongmanguan&page='+ this.num +'&size=' + this.size +'').then((res) => {
                    res = res.data
                    this.total = res.total
                    this.hasMore = false
                    this.animeList = res.list
                    if (this.total < 10) {
                        this.hasMore = true
                        this.endMore = true
                        return
                    }
                })
            },
            // 下拉加载
            searchMore () {
                if (this.total < 10) {
                    this.hasMore = true
                    this.endMore = true
                    return
                }
                this.num = this.num+1
                if ((this.num-1) * this.size <= this.total) {
                    axios.get('/api/index.php?g=Api&m=Guanwang&a=dongmanguan&page='+ this.num +'&size=' + this.size +'').then((res) => {
                        let data = res.data.list
                        if (!data.length) {
                            this.hasMore = true
                        }
                        this.animeList = this.animeList.concat(data)
                    })
                } else {
                    this.hasMore = true
                    this.endMore = true
                } 
            },
            //补零
            _pad(num, n = 2) {
                let len = num.toString().length;
                while(len < n) {
                    num = '0' + num;
                    len++;
                }
                return num;
            },
            //时间戳转换
            format(interval) {
                interval = interval | 0;
                const minute = this._pad(interval / 60 | 0);
                const second = this._pad(interval % 60);
                return `${minute}:${second}`;
            }
        },
        computed: {
            percent() {
                return this.currentTime / this.duration; 
            }
        },
        watch: {
            // 监听input变化进行搜索判断
            searchInput () {
                this.list = []
                let result = []
                if(this.searchInput === "") {
                    result = []
                    this.list = []
                    return
                }
                for (let i in this.searchList) {
                    let value = this.searchList[i].title
                    if(value.indexOf(this.searchInput) > -1) {
                        result.push(i)
                    }
                }
                for(let k in result) {
                    this.list = this.list.concat(this.searchList[result[k]])
                }
            }
        },
        components: {mTitle,Scroll,Loading},
        created () {
            this.getAnimeList()
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    
    .anime
        width: 100%
        height: 100%
        position: relative
        overflow: hidden
        background: #fff
        .search
            width: 100%
            height: 44px
            background: #efeff4
            padding: 0 15px
            box-sizing: border-box
            -webkit-box-sizing: border-box
            position: relative
            overflow: hidden
            .searchInput
                width: 100%
                height: 32px
                background: #fff
                margin-top: 6px
                border: none
                border-radius: 0
                padding: 0 10px
                box-sizing: border-box
                -webkit-box-sizing: border-box
            .search-icon
                position: absolute
                background: url('./search-icon.png') no-repeat
                width: 13px
                height: 13px
                background-size: 100% 100%
                top: 16px
                left: 50%
                margin-left: -15px
            .searchPlaceHolder
                font-size: 14px
                color: #979797
                position: absolute
                top: 17px
                left: 51%
        .anime-wrapper
            padding: 0 15px
            width: 100%
            position: absolute
            overflow: hidden
            top: 86px
            bottom: 54px
            box-sizing: border-box
            -webkit-box-sizing: border-box
            .loading-wrapper
                position: absolute
                top: 50%
                transform: translateY(-50%)
                width: 100%
            .anime-item
                width: 100%
                .bottom-text
                    width: 100%
                    height: 40px
                    line-height: 40px
                    font-size: 14px
                    text-align: center
                    color: #ddd
                    justify-content: center
                    margin-top: -10px
                    padding: 0
                    border-bottom: none
                .anime-list
                    width: 100%
                    border-bottom: 1px solid #eee
                    margin-bottom: 12px
                    .anime-list-date
                        color: #888
                        font-size: 12px
                    .anime-list-title
                        font-size: 16px
                        color: #000
                        margin-top: 6px
                        ellipsis()
                    .video-wrapper
                        width: 100%
                        margin-top: 6px
                        margin-bottom: 14px
                        .video-info
                            width: 100%
                            object-fit: fill
                            height: 180px
                    .music-wrapper
                        width: 100%
                        height: 90px
                        border: 1px solid #eaeaea
                        margin-top: 6px
                        margin-bottom: 14px
                        display: flex
                        align-items: center
                        .left
                            flex: 0 0 70px
                            width: 70px
                            .music-icon
                                background: url('./music-icon.png') no-repeat
                                width: 38px
                                height: 38px
                                background-size: 100% 100%
                                display: block
                                margin: 0 auto
                                &.active
                                    background: url('./music-pause-icon.png') no-repeat
                                    background-size: 100% 100%
                        .right
                            flex: 1
                            padding-right: 20px
                            box-sizing: border-box
                            .music-title
                                font-size: 16px
                                ellipsis()
                                color: #000
                            .music-from
                                font-size: 12px
                                color: #888
                                margin-top: 6px
                                display: block
                            .progress-bar-wrapper
                                width: 100%
                                .bar-inner
                                    position: relative
                                    height: 2px
                                    background: rgba(0,0,0,0.3)
                                    margin-top: 6px
                                    .progress
                                        position: absolute
                                        width: 0%
                                        background: #0090d2
                                        height: 2px
                            .music-time-wrapp
                                width: 100%
                                margin-top: 4px
                                .star-time
                                    font-size: 12px
                                    color: #888
                                    display: inline-block
                                .end-time
                                    text-align: right
                                    font-size: 12px
                                    color: #888
                                    display: inline-block
                                    float: right
        .no-result
            padding: 0 15px
            line-height: 30px
            font-size: 16px
            color: #888
        .anime-fixed
            position: fixed
            bottom: 0
            height: 54px
            left: 0
            width: 100%
            background: #fff
            box-sizing: border-box
            padding: 0 15px
            display: flex
            align-items: center
            border-top: 1px solid rgba(7,17,27,.1)
            .anime-fixed-item
                flex: 1
                overflow: hidden
                &.active
                    .icon-item1
                        background: url('./anime-icon1-active.png') no-repeat
                        background-size: 100% 100%
                    .desc
                        color: #0094d4
                    .icon-item2
                        background: url('./anime-icon2-active.png') no-repeat
                        background-size: 100% 100%
                    .desc
                        color: #0094d4
                    .icon-item3
                        background: url('./anime-icon3-active.png') no-repeat
                        background-size: 100% 100%
                    .desc
                        color: #0094d4
                .icon-item1
                    background: url('./anime-icon1.png') no-repeat
                    width: 21px
                    height: 21px
                    background-size: 100% 100%
                    display: block
                    margin: 0 auto
                .desc
                    color: #a1a1a1
                    text-align: center
                    font-size: 12px
                    display: block
                    margin-top: 4px
                .icon-item2
                    background: url('./anime-icon2.png') no-repeat
                    width: 18px
                    height: 21px
                    background-size: 100% 100%
                    display: block
                    margin: 0 auto
                .desc
                    color: #a1a1a1
                    text-align: center
                    font-size: 12px
                    display: block
                    margin-top: 4px
                .icon-item3
                    background: url('./anime-icon3.png') no-repeat
                    width: 21px
                    height: 20px
                    background-size: 100% 100%
                    display: block
                    margin: 0 auto
                .desc
                    color: #a1a1a1
                    text-align: center
                    font-size: 12px
                    display: block
                    margin-top: 4px                       
</style>